<template>
  <el-dialog
    :model-value="visible"
    width="680px"
    title="发送钥匙"
    @close="handleClose"
    :fullscreen="mobile"
  >
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item prop="name" label="姓名" :rules="[{ required: true, message: '请选择姓名', trigger: 'blur' }]">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-select v-model="form.name" @change="handleNameChange">
              <el-option label="张飞" value="10023"></el-option>
            </el-select>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-input disabled v-model="form.phone"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="mb10 flex-row-center">
        <span>电子钥匙时间列表</span>
        <el-tooltip
          effect="dark"
          placement="top-start"
        >
          <template #content>
            <div style="width: 260px;">可设置待收账单，租客完成支付后电子钥匙的有效期自动续期到下次待支付时间。</div>
          </template>
          <el-icon class="ml5"><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
      <el-form-item>
        <div v-infinite-scroll="load" style="overflow: auto;height: 160px;width: 90%;">
          <div class="primary-section mr10" v-for="(item, index) in list" :key="index">
            <el-row justify="space-between">
              <el-col :span="16">
                <span class="number-radius">{{ index + 1 }}</span>
                <span>{{item.startDate}} - {{item.endDate}}</span>
              </el-col>
              <el-col :span="4" >
                <el-text class="flex-right" type="success" v-if="item.status === 1">
                  <el-icon><CircleCheckFilled /></el-icon>
                  <div class="ml5">已支付</div>
                </el-text>
                <el-text class="flex-right" type="warning" v-else-if="item.status === 0">
                  <div>待支付续期</div>
                </el-text>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form-item>
      <el-row>
        <el-col :span="8" class="flex-row-center">
          <span>自定义密码</span>
          <el-tooltip
            effect="dark"
            placement="top-start"
          >
            <template #content>
              <div style="width: 260px;">授予入住人可通过【好房享住}微信小程序自助设置密码，授予期限与电子钥匙期限一致</div>
            </template>
            <el-icon class="ml5"><QuestionFilled /></el-icon>
          </el-tooltip>
          <el-switch
            class="ml10"
            size="large"
            inline-prompt
            v-model="form.customPwd"
            active-text="是"
            inactive-text="否"
          />
        </el-col>
        <el-col :span="8" class="flex-row-center">
          <span>授予添加IC卡</span>
          <el-tooltip
            effect="dark"
            placement="top-start"
          >
            <template #content>
              <div style="width: 260px;">授予入住人可通过【好房享住】微信小程序自助添加IC卡，授予期限与电子钥匙期限一致</div>
            </template>
            <el-icon class="ml5"><QuestionFilled /></el-icon>
          </el-tooltip>
          <el-switch
            class="ml10"
            size="large"
            inline-prompt
            v-model="form.authIcCard"
            active-text="是"
            inactive-text="否"
          />
        </el-col>
        <el-col :span="8" class="flex-row-center">
          <span>授予添加指纹</span>
          <el-tooltip
            effect="dark"
            placement="top-start"
          >
            <template #content>
              <div style="width: 260px;">授予入住人可通过【好房享住】微信小程序自助添加指纹，授予期限与电子钥匙期限一致</div>
            </template>
            <el-icon class="ml5"><QuestionFilled /></el-icon>
          </el-tooltip>
          <el-switch
            class="ml10"
            size="large"
            inline-prompt
            v-model="form.fingerprint"
            active-text="是"
            inactive-text="否"
          />
        </el-col>
      </el-row>
      <el-form-item :prop="item.lockMac" v-for="(item, index) in deviceList" :key="index" style="margin-bottom: 0;">
        <el-checkbox v-model="form[item.lockMac]">{{ item.lockAlias }}</el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleOk">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="SendKey">
import { CircleCheckFilled, QuestionFilled, Check, Close } from '@element-plus/icons-vue'
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const list = ref([{
  startDate: '2024-01-13 12:01',
  endDate: '2024-02-01 12:01',
  status: 1
}])

const deviceList = ref([
  {
    "lockId": 8231811,
    "relationType": "110702",
    "featureValue": "C2F44754CF5F7",
    "electricQuantity": 0,
    "lockAlias": "大门口网吧入口楼梯",
    "lockData": "sRxAxPz6dnKqAY2RFlXOiOjMdkqAETMelaYvpWuH1LfVuRQr8WKIKg3yIy+DXRLQLLF0Rrc5F7PRvPrYCIdH6eI5jMFv6koYtNR7sEp6TxHDJM01SrPPI1zt0aBXPMDBXZFu3NUX6QTV85XHVXRTSXSOIa8zr2Ot+2UnDgwmPtf0ujYBPUa9NaM3LF4fj21oQ349lH3Mgj/yQf3/3CZ+a26ozUqnI7g54QT3X7SqTj2uufeioFQfvtTFTRZ4zhgN3ZflyxW022ur/pvXwvM7VMFAxzcpesu7VDZVWyNwNET6I7aClO+dvgYaX1/PuP31AU4A00aqH+6Mtey8HkQ0iYkxOXL1PIUb3Ru1MZuuLsED0Au/f4GaIzuRtoetxM5LFwZfQNV1T5BhGsVpxnpI/S7PR+mgIC+N3sKq2zkulxrZ+mmpcYydH/yVeIiw6aj/hf7FZLqg2SMGnfiNKRg3Wt3IyynfvNbWhpjpByoNmhey9kTrciRWwCDW02vZhgQJspaoRpDEGQG7e2Y34+wOnB5kvdrgqfYCiGPMITMFio37tHmgI8Wun3JVpr6B/JeRsljmpZRPamaHj64ybKPVMGLAASoOfSBCsqvg0eSNCpaLQvjaUpU=",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 2
    },
    "isHotelLock": 0,
    "lockMac": "8B:42:F8:DA:52:95"
  },
  {
    "lockId": 8310551,
    "relationType": "110701",
    "featureValue": "C2F44754CF5F7",
    "electricQuantity": 80,
    "lockAlias": "劲叶公寓0201",
    "lockData": "ICbig5Ouj0Dj/oSvCMkeYGnTsj6nQ8BrBfvSaHHKzAYEJ13ylJDD0XgoMaRL6E+pJwCjmwGKHICv2bEEShpA9zDzipVbDBM2HRg80A5pHDQ5ChuMGEQeQNrJ4O5Yh0Gapqgt8KnUJjOpXLEe3ry3knK5pCNC/8MMhbCpRr/li5OgfIorjGat/vGDocgfmV5gu1W5helNYZpzHRzM6g4/+FuKoPLt/wInpmILWfHJaRPKVVhzW962ZGvvqgfQKIgP8UmbDHl8Q/UkiksLzyp1sTfCEuZy5uMDHN+L6cm8c237kKxcnOj6Gukq/i04QaMg6EJcb4QpLgH0TGfd8ZTFUFuLFZl1ww+U0Xp/rdzWhzdylG5A/fcPtTfJyLowOIkHsxCwNP+qZ4wEEbXFJj9FyqZuK7U0P43A0RresKOlImIwJkwtuujLwnjzeG/ObM4RtHCxqfThYbo/HrzAl7OuIHv0CkWfq6xGF2YWgKwlcRYVql1t5JAwjjPz2mMXUe8rU/UpwlWAqfESmH9Mp10Vxu37WxlU3OLqcx3vUx9zfVlma3VjEKNHvfzHlcsCFScUhr7CJmwE2ao1lhxDfkdN4uyoidYSZ5Tacf2OnoQfGUlywLQERds=",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 2
    },
    "isHotelLock": 0,
    "lockMac": "72:C0:B4:04:45:DB"
  },
  {
    "lockId": 8310643,
    "relationType": "110702",
    "featureValue": "C2744254CFDF7",
    "electricQuantity": 100,
    "lockAlias": "大门口电梯入口",
    "lockData": "KY9f8QuzY5e+C0zSSXObspx6zidJUJfUTb6Bhg4cQX1LA0RndTfeQvTilgnhzg1p1Hr+sbN7ZlboFNB2XUaHe1Wt6NCqCNtwvU4mNRy0O6mOYiQ1kkVz7+Xqircmi7drS3iGqeLhJH3R+4KcIuRewjWA6R29JWBrhb5H8wzFqz0cu4DD44JZx1+zLrhRErxoLiEn/GA0HzIP9ASp593aqBiNklRur1gkvivENjmjK9wlECcyo065LM1ESedrux5P/xNez+Is0/1Cof1PjIXBrZPqKAqKdqpdsVXtgxTlFiUD8uzdgSH4AqXxWBh2GXCTanEIRWqwVGIYa+CeLHqOp6Kw7VjN0mMnYKDbFpWiMWt3SFLc7Dh+qCTWwm+MbkrhlcPGHJXc4fSwJOToXtin37hUd/x4GDxfivtZPOnfqzwXjlKounBuACa5GeeFHX8I47Rk7Xd3ReK3ec7U+3oREJQd9ruLhmg4kz0/bth2hWmfT5lR54u/NiTEsuNTKRnJNy/mTjbazMc6bgQYLW/A+SC1XHhif3h5CJRjdYG/K9gDw1XDwySaKHsOj/ETG101KUKe61afNXXN1Nv1QwLXyf/L78yhlQ==",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 4
    },
    "isHotelLock": 0,
    "lockMac": "FF:CB:EF:CC:A1:95"
  }
])


// list.value.push()
const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  form: {
    name: undefined,
    phone: undefined,
    customPwd: false,
    authIcCard: false,
    fingerprint: false,
  }
})
const { form } = toRefs(data)
deviceList.value.forEach(item => {
  form.value[item.lockMac] = false
})
const phoneDict = {
  10023: '13023123123'
}

watch(() => props.visible, (val) => {
  if (val) resetForm()
})
// 重置表单
function resetForm() {
  form.value = {
    name: undefined,
    phone: undefined,
    customPwd: false,
    authIcCard: false,
    fingerprint: false,
  }
  proxy.resetForm('formRef')
  deviceList.value.forEach(item => {
    form.value[item.lockMac] = false
  })
}

function handleNameChange(value) {
  form.value.phone = phoneDict[value]
}

function load() {
  Array(10).fill(1).forEach(() => {
    list.value.push({
      startDate: '2024-01-13 12:01',
      endDate: '2024-02-01 12:01',
      status: 0
    })
  })
}

// 取消
function handleClose() {
  emit('cancel')
}
// 确定
function handleOk() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      console.log(form.value);
      emit('ok', form.value)
    }
  })
}
</script>
<style lang="scss" scoped>
.number-radius {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--el-color-primary-light-5);
  color: var(--el-color-primary-light-9);
  display: inline-block;
  line-height: 18px;
  text-align: center;
  margin-right: 5px;
}
.flex-right {
  display: flex;
  align-items: center;
  justify-content: right;
}
</style>